<template>
<div class="container">
    <div class="card">
        <el-breadcrumb separator="/" class="card-body">
            <el-breadcrumb-item :to="{ path: '/AdminHome' }"><i class="el-icon-location"></i>首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{ this.$route.meta.title }}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="card clearfix">
        <div class="classfy-tree" :style="{ minHeight: cardBodyHeight + 'px' }">
            <div class="card-header">
                存储位置 :
                <div class="f-right">
                    <el-button type="text" icon="el-icon-plus" @click="create">添加</el-button>
                </div>
            </div>
            <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" default-expand-all></el-tree>
        </div>
        <div class="classfy-data" ref="tabBody">
            <div class="card-header">
                <h2 class="e_inner_text">
                    {{ storageName }}
                    <div class="f-right header-console">
                        <el-button @click="update(id)" type="text" size="small">修改</el-button>
                        <span>|</span>
                        <el-button @click="delte(id)" type="text" size="small">删除</el-button>
                    </div>
                </h2>
            </div>
            <el-table :data="tableData" v-isLoading="isLoading">
                <el-table-column fixed prop="id" label="ID" width="120px">
                </el-table-column>
                <el-table-column prop="code" label="编码" width="120">
                </el-table-column>
                <el-table-column prop="label" label="名称" width="">
                </el-table-column>
                <el-table-column prop="storageDesc" label="描述" width="">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="200">
                    <template slot-scope="scope">
                            <el-button @click="update(scope.row.id)" size="small">修改</el-button>
                            <el-button @click="delte(scope.row.id)" size="small">删除</el-button>
                        </template>
                </el-table-column>
            </el-table>
            <div class="page-wrap" v-if="pagesTotal>10">
                <el-pagination background @size-change="sizeChange" @current-change="currentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagesTotal">
                </el-pagination>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import request from "@/utils/request";
export default {
  name: "StorageLocation",
  data() {
    return {
      storageName: "",
      tableData: "",
      treeData: "",
      defaultProps: {
        children: "children",
        label: "label",
        treeId: "id"
      },

      id: "",
      pageSize: 10,
      pagesTotal: 0,
      currentPage: 1,

      isLoading:false
    };
  },
  methods: {
    create() {
      this.$router.push({
        path: "/SystemSetting/StorageLocation/Create"
      });
    },
    update(id) {
      this.$router.push({
        path: "/SystemSetting/StorageLocation/Update" + "?id=" + id
      });
    },
    delte(id) {
      this.$confirm("确认删除这个储存位置？")
        .then(_ => {
          request({
            method: "get",
            url: this.$api.deleteStorage + `?id=${id}`
          });
        })
        .then(() => {
          this.$message.success("删除成功!");
          this.getTreeData();
        })
        .catch(_ => {});
    },
    handleNodeClick(data) {
      //通过ID刷新右边分类数据
      this.storageName = data.label;
      this.id = data.id;
      this.getStorageLocationList(this.id, this.pageSize, 1);
    },
    getStorageLocationList(id = "", limit = 10, offset = 1) {
      request({
        method: "get",
        url:
          this.$api.queryStorageForPage +
          `?id=${id}&limit=${limit}&offset=${offset}`
      }).then(res => {
        this.tableData = res.data.list;

        this.pageSize = res.data.pageSize;
        this.pagesTotal = res.data.total;
      });
    },
    getTreeData() {
      this.isLoading = true;
      request({
        method: "get",
        url: this.$api.queryAllStorage
      }).then(res => {
        this.storageName = res.data[0].label;
        this.treeData = res.data;
        this.id = res.data[0].id;
        this.isLoading = false;
        this.getStorageLocationList(res.data[0].id, 10, 1);
      });
    },
    sizeChange(pageSize) {
      let id = this.id;
      this.pageSize = pageSize;
      this.getStorageLocationList(id, pageSize, 1);
    },
    currentChange(currentPage) {
      let id = this.id;
      let pageSize = this.pageSize;
      this.getStorageLocationList(id, pageSize, currentPage);
    }
  },
  mounted() {
    //初始化数据
    this.getTreeData();
  },
  computed: {
    cardBodyHeight: function() {
      let boxHeight = window.innerHeight - 149;
      return boxHeight;
    }
  }
};
</script>

<style lang="less" scoped>
.classfy-tree {
  width: 220px;
  float: left;
  position: relative;
  z-index: 1;
  background: #f9fafc;
  border-right: 1px solid #ebeef5;
  .card-header {
    border-bottom: 1px solid #e4e6e9;
  }
  .el-tree {
    padding: 10px;
    background: transparent !important;
  }
}
.classfy-data {
  padding-left: 221px;
  position: relative;
  z-index: 0;
  .card-header {
    line-height: 51px;
    height: 54px;
  }
  .e_inner_text {
    color: #000;
    font-size: 18px;
    line-height: 54px;
  }
}
.header-console{
  span{
    font-size: 12px;
    color: #375686;
  }
}
</style>